<template>
  <div>
    <swiper class="swiper" ref="swiper"
            :options="swiperOption">
      <slot/>
      <div class="swiper-button-prev" slot="button-prev"/>
      <div class="swiper-button-next" slot="button-next"/>
      <div class="swiper-pagination" slot="pagination"/>
    </swiper>
      <a-row class="swiper-pagination-title">
        <a-col :span="15" class="title-col">
          <p class="swiper-pagination-title-span">{{ title }}</p>
        </a-col>
      </a-row>
  </div>
</template>

<script>
// import {Swiper} from 'vue-awesome-swiper'
// import 'swiper/swiper-bundle.css'

export default {
  name: "SingleSwiper",
  components: {
    // Swiper
  },
  computed: {
    swiper() {
      return this.$refs.swiper.$swiper
    }
  },
  mounted() {
  },
  watch: {
    paginationTitle(val) {
      this.title = val[0].title
    }
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: false,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        autoplay: true,
        speed: 1000,
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        on: {
          init: () => {
            this.title = this.paginationTitle[0].title
          },
          slideChangeTransitionStart: () => {
            this.title = this.paginationTitle[this.swiper.activeIndex].title
          }
        }
      },
      title: ''
    }
  },
  props: {
    paginationTitle: {
      type: Array,
      default: () => [
        {title: `最新！“十四五”时期主要目标任务`},
        {title: `最新！“十四五”时期主要目标任务2`},
        {title: `最新！“十四五”时期主要目标任务3`}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

.swiper-button-prev {
  margin-left: -10px;
  height: 2em;
  width: 1.5em;
  background-color: #000;
  box-shadow: 0 0 0.4em 0 rgba(0, 0, 0, 0.4);
  transition: background-color 400ms;

  &:after {
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-left: 0.04em solid #fff;
    border-top: 0.04em solid #fff;
    margin-left: 0.07em;
    transform: rotate(-45deg);
  }

  &:hover {
    background-color: gray;
  }
}

.swiper-button-next {
  margin-right: -10px;
  height: 2em;
  width: 1.5em;
  background-color: #000;
  box-shadow: 0 0 0.4em 0 rgba(0, 0, 0, 0.4);
  transition: background-color 400ms;

  &:after {
    content: "";
    width: 0.2em;
    height: 0.2em;
    border-right: 0.04em solid #fff;
    border-bottom: 0.04em solid #fff;
    margin-right: 0.07em;
    transform: rotate(-45deg);
  }

  &:hover {
    background-color: gray;
  }
}

/deep/ .swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin-top: 0.8em !important;
    margin-right: 0.1em;
    background-color: #fff;
    position: relative;
    right: 0.4em;
  }

  bottom: 0;
  width: 100%;
  height: 30px;
  color: white;
}

/deep/ .swiper-pagination {
  background-color: rgba(0, 0, 0, 0.3);
  text-align: right;
}

.swiper-pagination-title {
  z-index: 100;
  position: relative;
  margin-top: -30px;
  color: #fff;
}

.swiper-pagination-title-span {
  position: relative;
  top: 0.35em;
  left: 0.5em;
  letter-spacing: 0.12em;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-col{
  height: 30px;
}
</style>
